import React from 'react';
import { Form, Input, Button, DatePicker, InputNumber } from 'antd';
import moment from 'moment';
import { OpMasterSelect, VendorSelect } from '@/components/FormItemSelect';
import { FormattedMessage } from 'umi';
import QuerySelect from '@/components/QuerySelect';

const FormItem = Form.Item;

const formLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

export default class UpdateForm extends React.Component<any, any> {
  formRef: any = React.createRef();
  handleSubmit = (values: any) => {
    const { onSubmit, eType } = this.props;
    values.venPartNum = '0';
    values.priceFormat = '0';
    values.pricePerCode = eType ? eType : 'MTL';
    values.opCode = !values.opCode ? '0' : values.opCode;
    if (typeof onSubmit === 'function') {
      onSubmit(values);
    }
  };
  setCurrent = (part?: any) => {
    var model: any = {};
    model.partNum = part.PartNum;
    model.partDescription = part.PartDescription;
    model.pum = part.IUM;
    this.formRef.current.setFieldsValue(model);
  };
  componentDidMount() {
    const { formVals } = this.props;
    if (formVals) {
      if (formVals.effectiveDate) {
        formVals.effectiveDate = moment(formVals.effectiveDate);
      }
      if (formVals.expirationDate) {
        formVals.expirationDate = moment(formVals.expirationDate);
      }
      this.formRef.current.setFieldsValue(formVals);
    }
  }
  formRender = () => {
    return (
      <Form {...formLayout} ref={this.formRef} onFinish={this.handleSubmit}>
        <Form.Item label={<FormattedMessage id="pages.partNum" />} required>
          <Input.Group compact>
            <FormItem
              name="partNum"
              rules={[{ required: true, message: <FormattedMessage id="pages.partNum.required" /> }]}
              noStyle
            >
              <Input style={{ width: 200 }} disabled />
            </FormItem>
            <FormItem noStyle>
              <QuerySelect
                width={680}
                sysReportName="PartSearch"
                text={<FormattedMessage id="pages.select" />}
                title={<FormattedMessage id="pages.partNum" />}
                btntype="primary"
                setCurrent={this.setCurrent}
                scroll={{ x: 'max-content', y: '200px' }}
                params={{ InActive: 'false' }}
              />
            </FormItem>
          </Input.Group>
        </Form.Item>
        <FormItem name="id" label="ID" hidden>
          <Input />
        </FormItem>
        <FormItem name="partDescription" label={<FormattedMessage id="pages.partDescription" />}>
          <Input.TextArea disabled />
        </FormItem>
        <FormItem name="pum" label={<FormattedMessage id="pages.IUM" />}>
          <Input placeholder="IUM" disabled />
        </FormItem>
        <FormItem name="effectiveDate" label={<FormattedMessage id="pages.effectiveDate" />}>
          <DatePicker />
        </FormItem>
        <FormItem name="expirationDate" label={<FormattedMessage id="pages.expirationDate" />}>
          <DatePicker />
        </FormItem>
        <OpMasterSelect
          width={200}
          labelInValue={false}
          rules={[
            {
              required: this.props.eType == 'SUB',
              message: <FormattedMessage id="opCode.required" />,
            },
          ]}
          showSearch
          name="opCode"
          label={<FormattedMessage id="pages.opCode" />}
          hidden={this.props.eType != 'SUB'}
        />
        <VendorSelect
          required={true}
          showSearch={true}
          width={200}
          name="vendorNum"
          label={<FormattedMessage id="pages.vendor" />}
        />
        <FormItem name="baseUnitPrice" label={<FormattedMessage id="pages.baseUnitPrice" />}>
          <InputNumber min={0} />
        </FormItem>
        <Form.Item wrapperCol={{ offset: formLayout.labelCol.span }}>
          <Button type="primary" htmlType="submit">
            <FormattedMessage id="pages.save" />
          </Button>
        </Form.Item>
      </Form>
    );
  };
  render() {
    const FormRender = this.formRender;
    return <FormRender />;
  }
}
